<template>
  <div class="_wz_singlePageA">

    <div>
      <Button type="primary" @click="getLoad">发起请求(请求前缀是按照子项目的前缀使用)</Button>
    </div>
    <Divider />

    <div style="display: flex;">
      <div>
        <img src="/img/logo.png" style="width:100px;"/>
        <div>加载的是 子应用 public下 资源</div>
      </div>
      <div>
        <img src="@/assets/logo.png" style="width:100px;"/>
        <div>加载的是 子应用 assets下 资源</div>
      </div>
    </div>
    <Divider />

    <div style="display: flex;gap: 16px 8px;">
      <Button type="primary" @click="openModal = true">弹窗（验证遮罩是否全屏）</Button>
      <Button type="primary" @click="openDrawer = true">抽屉（验证遮罩是否全屏）</Button>

      <Modal v-model="openModal" title="打开弹窗" draggable>
        <p>Content of dialog</p>
        <p>Content of dialog</p>
        <p>Content of dialog</p>
      </Modal>

      <Drawer title="打开抽屉" :closable="false" v-model="openDrawer">
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Drawer>
    </div>
    <Divider />
    <div>
      展示主应用默认带过来的参数:
      <span style="color: #f00;">{{!!defaultData?.data ? defaultData?.data : '--'}}</span>
    </div>
    <Divider />
    <div>
      <Input v-model="sendOutMain" type="textarea" placeholder="Enter something..." />
      给主应用发消息：<Button type="primary" @click="sendMessage">发送消息</Button>
    </div>
    <Divider />
    <div>
      接受主应用发送的数据:
      <span style="color: #f00;">{{mainApplyAData || '--'}}</span>
    </div>
    <Divider />
    <div>
      <Button type="primary" @click="routingJump">跳转子应用B 单页B</Button>
    </div>
    <Divider />





  </div>
</template>
<script>


import {getCurrentInstance,inject,nextTick,reactive, toRefs,toRef,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted, ref,defineComponent,toRaw,watch} from 'vue'
import { useRouter,useRoute } from "vue-router";

import { useMainStore } from '../store'  //pinia 使用 类似 vuex
import { storeToRefs } from 'pinia'//pinia 使用 类似 vuex
const mainStore = useMainStore() //pinia 使用 类似 vuex

import wuJieInteractive from "../util/wuJIe/wuJieInteractive";//无界业务对接
//reactive
export default defineComponent({
  name: 'singlePageA',//组件名称
  components: {},//组件引用
  setup (props,context) {


    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const router = useRouter();//路由跳转使用


    const state = reactive({
      openModal:false,//打开弹窗
      openDrawer:false,//打开抽屉
      sendOutMain:'',//给主应用发消息

    });


    // 接受默认数据
    const { defaultData,mainApplyAData} = storeToRefs(mainStore)


    const getLoad = ()=>{
      $axios.post("aaaaaaa",{}).then((res) => {

      }).catch((err) => {
        console.log("失败", err)
      })

    }

    //给主应用发消息
    const sendMessage = ()=>{
      wuJieInteractive.sonApplySend(state.sendOutMain)
    }


    //跳转子应用B 单页B
    const routingJump = ()=>{
      wuJieInteractive.routingJump("/singlePageB")
    }



    //默认请求
    const defaultRequest = ()=>{
      $axios.get("http://192.168.50.12:54330/webapi/cbsSignalPlatform/dvs/splitDrawing/getGisOrgunitList?orgtypeid=101,102&orgno=B031",{}).then((res) => {

        console.log(res,22222222222222222)

      }).catch((err) => {
        console.log("失败", err)
      })

    }


    // 其他的生命周期
    onBeforeMount (() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted (() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")
      defaultRequest();//默认请求
    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated (() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount (() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted (() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
      getLoad,//get请求加载
      defaultData,//接受vuex 的数据
      sendMessage,//给主应用发消息
      mainApplyAData,//接受主应用发送的数据
      routingJump,//跳转子应用B 单页B
      defaultRequest,//默认请求
    }
  }
})


</script>
<style lang="less">
  ._wz_singlePageA{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: auto;
    background: #a1a0a0;
    padding: 10px;
  }
</style>
